<template>
  <view class="course" @click="goDetail(detail)">
    <view class="head">
      <view class="logo">
        <image :src="setUrl(detail.thumb)" mode="aspectFill" class="img"></image>
      </view>
      <view class="right">
        <view class="boder">
          <view class="title line">{{ detail.title }}</view>
        </view>
        <view class="desc line2">{{ detail.profile }}</view>
        <view class="datas">
          <view class="money">
            <image src="../../static/currency.png" class="img"></image>
            <view class="font">{{ detail.price }}研投币</view>
          </view>
          <view class="money" v-if="detail.integral_deduction_enable">
            <image src="../../static/integral.png" class="img"></image>
            <view class="font">积分可抵{{ detail.integral_deduction_amount }}</view>
          </view>
        </view>
        <view class="tag" v-if="detail.tagList && detail.tagList.length">
          <view class="items" v-for="(dt, idx) in detail.tagList" :key='idx'>{{ dt.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { setUrl } from '@/common';

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
})

function goDetail(row){
  uni.navigateTo({
    url: `/pages/research/detail?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .course{
    width: 100%;
    padding: 40rpx 0;
    border-bottom: 1px solid #EFEFEF;
    &:last-child{
      border-bottom: 0;
    }
    .foot{
      width: 100%;
      padding-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .button{
        display: flex;
        align-items: center;
        .next{
          width: 190rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #ff484514;
          border-radius: 15rpx;
          border: 1px solid #FF3B38;
          color: #FF3B38;
          font-weight: 500;
          font-size: 26rpx;
          text-align: center;
          margin-left: 18rpx;
        }
      }
      .top{
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-image: linear-gradient(90deg, #FF312E 0%, #FFCC7A 100%);
        border-radius: 15rpx;
        color: #FFFFFF;
        font-weight: 500;
        font-size: 26rpx;
        text-align: center;
      }
    }
    .head{
      width: 100%;
      display: flex;
      align-items: flex-start;
      .right{
        flex: 1;
        padding-left: 20rpx;
        width: 0;
        position: relative;
        &.height{
          height: 171rpx;
        }
        .bottom{
          position: absolute;
          left: 20rpx;
          bottom: 0;
          .timeNumber{
            font-weight: 400;
            font-size: 24rpx;
            color: #797979;
            padding-top: 12rpx;
          }
        }
        .datas{
          display: flex;
          align-items: center;
          width: 100%;
          padding-top: 12rpx;
          .money{
            display: flex;
            align-items: center;
            padding-right: 16rpx;
            &:last-child{
              padding-right: 0;
            }
            .font{
              font-weight: 400;
              font-size: 24rpx;
              color: #E43222;
              padding-left: 10rpx;
            }
            .img{
              width: 24rpx;
              height: 24rpx;
              font-size: 0;
            }
          }
        }
        .tag{
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          width: 100%;
          padding-top: 12rpx;
          .items{
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            height: 44rpx;
            line-height: 44rpx;
            border-radius: 44rpx;
            padding: 0 30rpx;
            background-color: #F0F0F0;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
          }
        }
        .line{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .line2{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: #686868;
          padding-top: 12rpx;
        }
        .boder{
          display: flex;
          align-items: flex-start;
          .icon{
            width: 30rpx;
            height: 30rpx;
            transform: rotate(90deg);
            margin-top: 6rpx;
          }
          .title{
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
            flex: 1;
            width: 0;
            padding-right: 10rpx;
          }
        }
      }
      .logo{
        width: 283rpx;
        height: 171rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
    }
  }
</style>